<template>
    <view class="baby">
        <uni-popup ref="popup" @change="change" type="center" :maskClick="`false`">
            <view class="body" style="position: relative">

                <view @tap="close"  style="float: right;height: 80upx;width: 80upx">
                    <!--关闭-->
                </view>
                <view class="sex-select">
                    <view @tap="sex=1"  :class="{'select':sex===1,'flex-item':'true'}">
                        <image class="avatar"  src="https://listen-book.oss-cn-beijing.aliyuncs.com/icon/man.png"></image>
                        <view class="text">王子</view>
                    </view>
                    <view  @tap="sex=2" :class="{'select':sex===2,'flex-item':'true'}">
                        <image class="avatar"  src="https://listen-book.oss-cn-beijing.aliyuncs.com/icon/women.png"></image>
                        <view class="text">公主</view>
                    </view>
                </view>
                <view class="age">


                    <image @tap="sub" style="width:30upx;height: 50upx;float: left" src="https://listen-book.oss-cn-beijing.aliyuncs.com/icon/-.png"></image>

                    <image @tap="add" style="width:30upx;height: 50upx;float: right" src="https://listen-book.oss-cn-beijing.aliyuncs.com/icon/plus.png"></image>
                    <input  v-model="number" style="text-align: center;margin: 0 40upx" type="number" />

                </view>
                <view >
                    <view style="height:120upx" @tap="goon" class="flex-item">
                        <!--继续-->
                    </view>
                    <view style="height:120upx" @tap="complete" class="flex-item">
                        <!--完成-->
                    </view>
                </view>
            </view>
        </uni-popup>
    </view>
</template>

<script>
  import uniPopup from "@/components/uni-popup/uni-popup.vue"
  import Request from '@/utils/request.js'
  export default {
    props: {
      'show': {
        type: Boolean,
        default: false
      }
    },
  data() {
    return {
      number: 1,
      sex:1, //1男, 2女
    }
  },
    components: {uniPopup},
    name: "badyInfo",
    mounted: function () {
      // this.open();
    },
    watch: {
      show: function (newValue) {
        if (newValue) {
          this.open()
        } else {
          this.close();
        }
      }
    }, methods: {
      open() {
        this.$refs.popup.open()
      },
      close(){
        uni.setStorageSync('playNumber',0);
        this.$refs.popup.close()
      },
      change(e) {
        if (!e.show)
          this.$emit('close', e.show);
      },
      goon() {
        this.upload(1);
      },
      upload(goon) {
        uni.showLoading();
        let user = {
          'sex': this.sex,
          'age': this.number
        }
        Request.post('/user/baby', user).then((res) => {
          //覆盖用户信息
          uni.setStorageSync('user',res.data);
          if (goon) {
            uni.showToast({
              title: '添加成功',
              duration: 3000
            })
            if (res.data.baby.length > 5) {
              this.close();
            }
            this.sex = 1;
            this.number = 1;

          } else {
            uni.showToast({
              title: '添加成功',
              duration: 3000
            })
            this.close();
          }
        })
      },
      complete() {
        this.upload(0);
      },
      add() {
        this.number++;
      },
      sub() {
        this.number--
        if(this.number<0){
          this.number=0;
        }
      }
    }
  }
</script>

<style scoped>
    .age{
        height: 144upx;
        padding: 55upx 80upx 20upx 290upx;
    }
    .sex-select{
        padding: 360upx 50upx 0 50upx
    }
    .flex-item{
        display: inline-block;
        margin: auto;
        width: 50%;
        text-align: center;
    }

    .select image{
        border: 5upx solid rgb(252,179,0) !important;
    }
    .select .text{
        color:rgb(252,179,0);
    }

    .avatar{
        width: 126upx; height: 126upx; background-color: #eeeeee;
        border-radius: 126upx;
        border: 5upx solid rgb(255,251,240);
    }


    .baby .body {
        overflow: hidden;
        background: url("https://listen-book.oss-cn-beijing.aliyuncs.com/icon/babybg.png");
        background-size: 100%;
        width: 650upx;
        height: 900upx;
    }
</style>
